<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
	<title>Classtyle Touch</title>
	<link href="http://classtyle.com/release/classtyle.1.5.1.css" rel="stylesheet" type="text/css" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link href="icon.png" rel="apple-touch-icon"/>
	<style type="text/css">
		body{background:#444}
		a{color:#c30}

		.g-block{background:#fff;padding:10px;border-radius:5px;-webkit-box-shadow:0 0 5px #000}
		.mod-main .mhd{z-index:1;text-align:center;padding:3px 10px 4px;background:-webkit-gradient(linear,0 0,0 100%,from(#b00),to(#d00));color:#fff;-webkit-box-shadow:0 0 3px #666;text-align:center}
		.mod-main .mhd h2{text-shadow:1px 1px 2px #600}
		.mod-main .mbd h3{font-size:16px;margin:5px 0;color:#999}
		.mod-main .mbd h4{padding:0 10px;margin:5px -5px;font-size:14px;line-height:24px;background:#f0f0f0;border:1px solid #e0e0e0;border-radius:5px}
		.mod-main code{white-space:pre}
		.mod-main p{margin:5px 0}
		.mod-main p.cs-txt-tips{font-size:10px;padding:5px 10px;background:#ffffe1;border:1px solid #e0e0e0;border-radius:5px;line-height:16px}
		.mod-main .g-block{margin-bottom:10px}
		.mod-main .g-block:last-child{margin-bottom:0}
		.mod-main .cs-t-list_item:active{background:#fafafa;border-radius:5px}
		.mod-main .cs-t-list_link{line-height:normal;font-size:13px}
		.mod-main .cs-t-list_link .name,
		.mod-main .cs-t-list_link .class{position:absolute;font-weight:normal}
		.mod-main .cs-t-list_link .class{left:8px;top:15px}
		.mod-main .cs-t-list_link .name{right:0;top:15px;color:#999}
		
	</style>
</head>
<body class="cs-t-hideUrlBar">
<div class="page">
	<div class="mod mod-main cs-t-layer cs-t-layer-dft" id="mDefault">
		<div class="mhd cs-t-fixedHd">
			<h2 class="cs-t-fixedHd_title">Classtyle Touch 1.0.0</h2>
		</div>
		<div class="mbd cs-t-layer_trans cs-t-fixedBd">
			<div class="cs-t-fixedBd_inner">
				<div class="cs-t-article">
					<div class="g-block">
						<h3>什么是Classtyle Touch？</h3>
						<p>　　Classtyle Touch是Classtyle CSS框架的一个扩展，能帮助开发者快速搭建适合iPhone/iPod Touch、iPad和Android设备的网页界面。</p>
						<p>　　开发网页界面时，需要同时引入Classtyle CSS和Classtyle Touch的css文件（您可以将它们合并在同一个css文件中）。此外，Classtyle Touch还包含一个辅助实现布局和滚动等功能的js文件，需要在页面末端(&lt;/body&gt;前)引用。</p>
					</div>
					<div class="g-block">
						<h3>CSS库</h3>
						<h4>功能</h4>
						<div class="cs-t-list">
							<ul>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-hideUrlBar"><strong class="name">隐藏工具栏</strong><em class="class">body.cs-t-hideUrlBar</em></a>
								</li>
							</ul>
						</div>
						<h4>布局</h4>
						<div class="cs-t-list">
							<ul>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-fixedHd"><strong class="name">固定头/底部</strong><em class="class">.cs-t-fixedHd/.cs-t-fixedFt</em></a>
								</li>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-fixedBd"><strong class="name">固定主体</strong><em class="class">.cs-t-fixedBd</em></a>
								</li>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-layer"><strong class="name">层</strong><em class="class">.cs-t-layer</em></a>
								</li>
							</ul>
						</div>
						<h4>UI组件</h4>
						<div class="cs-t-list">
							<ul>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-scrlWrapper"><strong class="name">滚动区域容器</strong><em class="class">.cs-t-scrlWrapper</em></a>
								</li>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-scrl"><strong class="name">滚动区域</strong><em class="class">.cs-t-scrl</em></a>
								</li>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-list"><strong class="name">列表</strong><em class="class">.cs-t-list</em></a>
								</li>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-article"><strong class="name">正文</strong><em class="class">.cs-t-article</em></a>
								</li>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-btn"><strong class="name">按钮</strong><em class="class">.cs-t-btn</em></a>
								</li>
							</ul>
						</div>
						<h4>其他</h4>
						<div class="cs-t-list">
							<ul>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-trans"><strong class="name">过渡效果</strong><em class="class">.cs-t-trans</em></a>
								</li>
								<li class="cs-t-list_item cs-t-list_item-hasChild">
									<a class="cs-t-list_link" href="#mLib-cs-t-ua"><strong class="name">UA(自动添加)</strong><em class="class">body.cs-t-ua-</em></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="mod mod-main cs-t-layer" id="mLib-cs-t-hideUrlBar">
		<div class="mhd cs-t-fixedHd">
			<ul>
				<li class="cs-t-fixedHd_secOprt"><a href="#mDefault" class="cs-t-btn cs-t-btn-prev">返回</a></li>
			</ul>
			<h2 class="cs-t-fixedHd_title">body.cs-t-hideUrlBar</h2>
		</div>
		<div class="mbd cs-t-layer_trans cs-t-fixedBd">
			<div class="cs-t-fixedBd_inner">
				<div class="cs-t-article">
					<div class="g-block">
						<h3>说明</h3>
						<p>隐藏iPhone/iPod Touch的Safari浏览器的地址栏。</p>
					</div>
					<div class="g-block">
						<h3>示例</h3>
						<p class="cs-txt-tips">
<code>&lt;body class="<strong>cs-t-hideUrlBar</strong>"&gt;
...
&lt;/body&gt;</code>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="mod mod-main cs-t-layer" id="mLib-cs-t-fixedHd">
		<div class="mhd cs-t-fixedHd">
			<ul>
				<li class="cs-t-fixedHd_secOprt"><a href="#mDefault" class="cs-t-btn cs-t-btn-prev">返回</a></li>
			</ul>
			<h2 class="cs-t-fixedHd_title">.cs-t-fixedHd/.cs-t-fixedFt</h2>
		</div>
		<div class="mbd cs-t-layer_trans cs-t-fixedBd">
			<div class="cs-t-fixedBd_inner">
				<div class="cs-t-article">
					<div class="g-block">
						<h3>说明</h3>
						<p>始终固定在浏览器或外层容器顶部和底部的元素。</p>
						<p class="cs-txt-tips">如外层元素具有position:relative/absolute属性，将固定在此外层元素顶部和底部。</p>
					</div>
					<div class="g-block">
						<h3>示例</h3>
						<p class="cs-txt-tips">
<code>&lt;div class="phd <strong>cs-t-fixedHd</strong>"&gt;
	...
&lt;/div&gt;
&lt;div class="pbd"&gt;
	...
&lt;/div&gt;
&lt;div class="pft <strong>cs-t-fixedFt</strong>"&gt;
	...
&lt;/div&gt;</code>
						</p>
						<p class="cs-txt-tips">
<code>&lt;div class="mod" id="mDemo1"&gt;
	&lt;div class="mhd <strong>cs-t-fixedHd</strong>"&gt;
		...
	&lt;/div&gt;
	&lt;div class="mbd"&gt;
		...
	&lt;/div&gt;
	&lt;div class="mft <strong>cs-t-fixedFt</strong>"&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code>
						</p>
						<p class="cs-txt-tips">
<code>&lt;div class="mod" id="mDemo2"&gt;
	&lt;div class="mhd"&gt;
		&lt;div class="<strong>cs-t-fixedHd</strong>"&gt;
			...
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="mbd"&gt;
		...
	&lt;/div&gt;
	&lt;div class="mft"&gt;
		&lt;div class="<strong>cs-t-fixedFt</strong>"&gt;
			...
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</code>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="mod mod-main cs-t-layer" id="mLib-cs-t-fixedBd">
		<div class="mhd cs-t-fixedHd">
			<ul>
				<li class="cs-t-fixedHd_secOprt"><a href="#mDefault" class="cs-t-btn cs-t-btn-prev">返回</a></li>
			</ul>
			<h2 class="cs-t-fixedHd_title">.cs-t-fixedBd</h2>
		</div>
		<div class="mbd cs-t-layer_trans cs-t-fixedBd">
			<div class="cs-t-fixedBd_inner">
				<div class="cs-t-article">
					<div class="g-block">
						<h3>说明</h3>
						<p>配合“固定头部”和“固定底部”使用。将关联同级的“固定头部”和“固定底部”，自动适应“固定头部”和“固定底部”占用区域以外的区域。</p>
						<p class="cs-txt-tips">如外层元素具有position:relative/absolute属性，将关联此外层元素内同级的“固定头部”和“固定底部”。</p>
					</div>
					<div class="g-block">
						<h3>示例</h3>
						<p class="cs-txt-tips">
<code>&lt;div class="phd <strong>cs-t-fixedHd</strong>"&gt;
	...
&lt;/div&gt;
&lt;div class="pbd <strong>cs-t-fixedBd</strong>"&gt;
	...
&lt;/div&gt;</code>
						</p>
						<p class="cs-txt-tips">
<code>&lt;div class="mod" id="mDemo"&gt;
	&lt;div class="mhd <strong>cs-t-fixedHd</strong>"&gt;
		...
	&lt;/div&gt;
	&lt;div class="mbd <strong>cs-t-fixedBd</strong>"&gt;
		...
	&lt;/div&gt;
	&lt;div class="mft <strong>cs-t-fixedFt</strong>"&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>